<template>
  <div class="channel">
    <van-popup
      v-model="isShow"
      position="bottom"
      class="pop"
      :style="{ height: '80%' }"
    >
      <div class="cloes">
        <van-icon name="cross" size="30" @click="isShow = false" />
      </div>
      <!-- 我的频道 -->
      <van-cell title="我的频道" class="mychannel">
        <template #default>
          <van-button
            type="danger"
            plain
            size="mini"
            round
            @click="isEdit = false"
            v-if="isEdit"
            >完成</van-button
          >
          <van-button
            type="danger"
            plain
            size="mini"
            round
            v-else
            @click="isEdit = true"
            >编辑</van-button
          >
        </template>
      </van-cell>
      <van-cell-group
        :border="false"
        v-for="(item, index) in channelsList"
        :key="index"
      >
        <!-- 标签 -->
        <van-tag
          :color="index === active ? '#5babfb' : '#969799'"
          :text-color="index === active ? '#f85c5c' : '#f4f4f4'"
          @click="checkthis(index)"
        >
          {{ item.name }}
          <van-icon
            name="clear"
            v-if="isEdit && index != 0"
            @click.stop="delChannel(index)"
          />
        </van-tag>
      </van-cell-group>
      <!-- 频道推荐 -->
      <van-cell value="频道推荐" />
      <van-cell-group
        :border="false"
        v-for="(item, index) in recommend"
        :key="index"
      >
        <!-- 标签 -->
        <van-tag
          color="#969799"
          text-color="#f4f4f4"
          @click="addChannel(item)"
          >{{ item.name }}</van-tag
        >
      </van-cell-group>
    </van-popup>
  </div>
</template>

<script>
import { getLocal, saveLocal } from '@/utils/local'
import { getAllChannels, updateChannels } from '@/api/channel.js'
export default {
  props: ['channelsList', 'active'],
  data () {
    return {
      isShow: false,
      isEdit: false,
      token: '',
      allChannels: []
    }
  },
  computed: {
    recommend () {
      const ids = this.channelsList.map(item => item.id)
      return this.allChannels.filter(item => !ids.includes(item.id))
    }
  },
  methods: {
    // 点击上方标签
    checkthis (index) {
      this.$emit('update:active', index)
    },
    // 保存用户编辑的频道
    async saveChannel () {
      if (this.token && this.token.token) {
        // 用户登录
        const myChannel = this.channelsList.slice(1).map((item, index) => {
          return { id: item.id, seq: index + 2 }
        })
        await updateChannels(myChannel)
      } else {
        saveLocal('channels', JSON.stringify(this.channelsList))
      }
    },
    // 新增按钮
    addChannel (item) {
      this.$set(item, 'loading', false)
      this.$set(item, 'isLoading', false)
      this.$set(item, 'finished', false)
      this.$set(item, 'list', [])
      this.channelsList.push(item)
      this.saveChannel()
    },
    // 删除按钮
    delChannel (index) {
      this.channelsList.splice(index, 1)
      if (this.active > index) {
        this.$emit('update:active', this.active - 1)
      }
      this.saveChannel()
    },
    // 得到所有的频道
    async allChannelsListGet () {
      const res = await getAllChannels()
      this.allChannels = res.data.data.channels
    }
  },
  created () {
    this.token = JSON.parse(getLocal('userInfo'))
    this.allChannelsListGet()
  }
}
</script>

<style lang="less">
.channel {
  width: 100%;
  .pop {
    width: 365px;
    padding: 10px 5px;
    .cloes {
      position: relative;
      height: 30px;
      .van-icon {
        position: absolute;
        top: 0;
        right: 0;
      }
    }
  }
  .mychannel {
    .van-button--mini {
      padding: 4px 15px;
    }
  }
  .van-cell__value--alone,
  .van-cell__title {
    font-size: 16px;
  }
  .around {
    display: flex;
  }
  .van-tag {
    margin: 10px 0 0 14px;
    padding: 5px 10px;
    font-size: 14px;
    float: left;
    border-radius: 8px;
    .van-icon {
      position: absolute;
      right: -7px;
      top: -7px;
      color: #cdcdcd;
    }
  }
}
</style>
